<template>
  <div class="addPageData-wrapper">
    <el-dialog
      title="选择页面数据项"
      :visible.sync="addPageDataVisible">
      <div class="addPageData-content">
        <el-row :gutter="40">
          <el-col :span="12">
            <div class="content-left">
              <div class="left-header">
                <p>页面名称:<el-input v-model="pageName" :disabled="true"></el-input></p>
              </div>
              <div class="left-table">
                <div class="table-header">
                  <p>待选数据项 (<span>{{tableDataUnselected.length}}</span>)</p>
                  <el-form label-width="50px">
                    <el-form-item label="搜索：">
                      <el-input v-model="input" placeholder="输入数据项名称/标签搜索"></el-input>
                      <i slot="suffix" class="el-input__icon el-icon-search"></i>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="table-content">
                  <el-table
                    :data="tableDataUnselected"
                    class="unselected"
                    :header-cell-class-name="cellClass"
                    border
                    ref="unselectedTable"
                    @select="handleDataSelect"
                    style="width: 100%">
                    <el-table-column prop="itemSn" label="数据项标识" width="180"></el-table-column>
                    <el-table-column prop="itemLable" label="标签" width="180"></el-table-column>
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="content-left">
              <div class="left-header">
                <p>页面名称:<el-input v-model="pageName" :disabled="true"></el-input></p>
              </div>
              <div class="left-table">
                <div class="table-header">
                  <p>已选数据项 (<span>{{tableDataSelected.length}}</span>)</p>
                </div>
                <div class="table-content">
                  <el-table
                    :data="tableDataSelected"
                    border
                    :header-cell-class-name="cellClass"
                    class="selected"
                    @select="handleDataMove"
                    style="width: 100%">
                    <el-table-column prop="itemSn" label="数据项标识" width="180"></el-table-column>
                    <el-table-column prop="itemLable" label="标签" width="180"></el-table-column>
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doSubmit()">确 定</el-button>
    <el-button @click="addPageDataVisible = false">取 消</el-button>

  </span>
    </el-dialog>
  </div>

</template>

<script>
    export default {
      name: 'addPageDataForm',
      data () {
        return {
          addPageDataVisible: false,
          pageId: '',
          pageName: '',
          input: '',
          loading: false,
          inputForm: {
            ids: '',
            modelId: '',
            modelPageGroupId: ''
          },
          tableDataUnselected: [],
          tableDataSelected: [],
          selectedId: []
        }
      },
      methods: {
        init (method, obj) {
          console.log('obj', obj)
          if (method === 'add') {
            this.addPageDataVisible = true
            this.pageId = obj.pageData.id
            this.pageName = obj.pageData.pageName
            this.inputForm.modelId = obj.modelId
            this.inputForm.modelPageGroupId = obj.pageGroup.groupId
            console.log(this.pageId)
            console.log(this.pageName)
            console.log(this.modelId)
            this.getDataItemList()
            this.loading = false
          }
        },
        // 获取数据列表
        getDataItemList () {
          this.loading = true
          this.$http({
            url: '/model/pageGroup/pageItemlist',
            method: 'get',
            params: {
              'pageId': this.pageId,
              'modelId': this.inputForm.modelId
            }
          }).then(({
                     data
                   }) => {
            if (data.code === '200') {
              console.log(data)
              this.tableDataUnselected = data.result
              this.loading = false
            }
          })
        },
        // 待选中勾选时触发
        handleDataSelect (selection, row) {
          if (this.tableDataSelected.indexOf(row) === -1) {
            this.tableDataSelected.push(row)
          } else {
            this.tableDataSelected.forEach((item, index) => {
              if (item.id === row.id) {
                this.tableDataSelected.splice(index, 1)
              }
            })
          }
        },
        // 不显示表头的全选
        cellClass (row) {
          if (row.columnIndex === 2) {
            return 'disableCheck'
          }
        },

        // 移除选中
        handleDataMove (row) {
          this.tableDataSelected.forEach((item, index) => {
            if (item.id === row[0].id) {
              this.tableDataSelected.splice(index, 1)
            }
          })
          this.tableDataUnselected.forEach((item, index) => {
            if (item.id === row[0].id) {
              this.$refs.unselectedTable.toggleRowSelection(this.tableDataUnselected[index], false)
            }
          })
        },
        // 表单提交
        doSubmit () {
          if (this.tableDataSelected.length) {
            this.loading = true
            this.tableDataSelected.forEach(item => {
              if (this.selectedId.indexOf(item.id) === -1) {
                this.selectedId.push(item.id)
              }
            })
            this.inputForm.ids = this.selectedId.join(',')
            this.$http({
              url: `/model/pageGroup/savePageById`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              if (data && data.code === '200') {
                this.addPageDataVisible = false
                this.$message.success(data.message)
                this.$emit('refreshDataList')
              }
            })
          } else {
            this.$message.error('未选择数据项')
          }
        }
      }
    }
</script>

<style lang="scss" scoped>
.addPageData-wrapper{
  p{
    margin: 0;
  }
  ::v-deep.el-dialog__wrapper .el-dialog{
    width: fit-content;
    .el-dialog__header{
      padding: 0 20px !important;
      height: 41px;
      line-height: 41px;
    }
    .el-dialog__headerbtn{
      top: 11px;
    }
    .el-dialog__title{
      font-size: 16px;
      color: #333333;
    }
    .el-dialog__body{
      padding: 30px 50px!important;
      .addPageData-content{
        .el-input{
          height: 32px;
          input {
            height: 32px;
            width: 320px;
            border: 1px solid #AAAAAA;
            border-radius: 4px;
            color: #333333;
            padding: 0 10px !important;
          }

          input:hover, input:focus {
            border-color: #1890ff;
          }

          .el-input__inner::-webkit-input-placeholder {
            color: #999999;
          }
        }
        .el-input.is-disabled{
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
          input:hover, input:focus {
            border-color: #AAAAAA;
          }
          input{
            background: #EEEEEE;
          }
        }
        .left-table{
          padding: 10px;
          border: 1px solid #DDDDDD;
          margin-top: 20px;
          .table-header{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            .el-form-item{
              margin-bottom: 10px;
            }
            p{
              margin-bottom: 10px;
            }
            .el-form-item__label{
              text-align: left;
              padding-right: 0;
            }

          }
        }
        .unselected .disableCheck{
          .cell::before{
            display: block;
            content: '选择';
            position: absolute;
            text-align: center;
          }
          .el-checkbox__input{
            display: none;
          }
        }
        .selected .disableCheck{
          .cell::before{
            display: block;
            content: '移除';
            position: absolute;
            text-align: center;
          }
          .el-checkbox__input{
            display: none;
          }
        }
      }
    }

    .left-header{
      .el-input{
        display: inline-block;
        width: inherit;
        margin-left: 10px;
      }
    }
  }
}
</style>
